<template>
  <view class="health-container">
    <view class="video-list">
      <!-- 视频列表项 -->
      <view class="video-item" v-for="(item, index) in videoList" :key="index" @click="playVideo(item)">
        <!-- 视频封面 -->
        <view class="video-detail">
          <video 
            :src="item.videoUrl" 
            controls
            :show-center-play-btn="true"
            :enable-progress-gesture="true"
            :show-fullscreen-btn="true"
            :show-play-btn="true"
            :show-progress="true"
            :initial-time="0"
            :direction="0"
            :object-fit="'contain'"
            :show-mute-btn="true"
            :show-screen-lock-button="true"
            :show-snapshot-button="true"
            :show-volume-type="'vertical'"
            :codec="'hardware'"
            :http-cache="true"
            :vsrc="item.videoUrl"
            :poster="item.coverUrl"
            @error="videoErrorCallback"
            @fullscreenchange="fullscreenchange"
          ></video>
        </view>
        <!-- 视频信息 -->
        <view class="video-info">
          <text class="video-title">{{ item.title }}</text>
          <view class="doctor-info">
            <image :src="item.doctorAvatar" mode="aspectFill" class="doctor-avatar"></image>
            <text class="doctor-name">{{ item.doctorName }}</text>
            <text class="doctor-title">{{ item.doctorTitle || '未知职称' }}</text>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoading">
        <text>加载中...</text>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="videoList.length === 0 && !isLoading">
        <image src="/static/images/轮播图1.jpg" mode="aspectFit"></image>
        <text>暂无视频内容</text>
      </view>
    </view>
  </view>
</template>

<script>
import { healthApi } from '@/api/health'

export default {
  data() {
    return {
      videoList: [],
      isLoading: false,
      page: 1,
      pageSize: 10,
      hasMore: true,
      systemInfo: null
    }
  },

  onLoad() {
    // 获取系统信息
    this.getSystemInfo()
    this.loadVideoList()
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1
    this.hasMore = true
    this.loadVideoList().then(() => {
      uni.stopPullDownRefresh()
    })
  },

  // 上拉加载更多
  onReachBottom() {
    if (this.hasMore && !this.isLoading) {
      this.page++
      this.loadVideoList()
    }
  },

  methods: {
    // 获取系统信息
    getSystemInfo() {
      try {
        const systemInfo = uni.getSystemInfoSync()
        this.systemInfo = systemInfo
      } catch (e) {
        console.error('获取系统信息失败:', e)
      }
    },

    // 视频错误回调
    videoErrorCallback(e) {
      console.error('视频播放错误:', e)
      uni.showToast({
        title: '视频加载失败',
        icon: 'none'
      })
    },

    // 全屏变化回调
    fullscreenchange(e) {
      console.log('全屏状态:', e.detail.fullScreen)
    },

    // 加载视频列表
    async loadVideoList() {
      if (this.isLoading) return

      try {
        this.isLoading = true
        const params = {
          page: this.page,
          pageSize: this.pageSize
        }

        const res = await healthApi.getHealthVideoList(params)

        if (res.code === 200 && res.data) {
          const newList = res.data || []

          // 格式化视频数据
          const formattedList = newList.map(video => ({
            id: video.id,
            title: video.title,
            coverUrl: video.coverUrl || '/static/images/video-default.jpg', // 默认封面图
            videoUrl: video.videoUrl || '', // 确保 videoUrl 不为空
            doctorName: video.appDoctor?.name || '未知医生', // 确保医生名字的获取方式
            doctorTitle: video.appDoctor?.title || '未知职称', // 确保医生职称
            doctorAvatar: video.appDoctor?.imgUrl || '/static/images/doctor-default.jpg', // 确保医生头像
            viewCount: video.viewCount || 0,
            likeCount: video.likeCount || 0
          }))

          // 如果是第一页，直接替换数据
          if (this.page === 1) {
            this.videoList = formattedList
          } else {
            // 追加新数据
            this.videoList = [...this.videoList, ...formattedList]
          }

          // 判断是否还有更多数据
          this.hasMore = formattedList.length === this.pageSize
        }
      } catch (error) {
        console.error('加载视频列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    // 播放视频
    playVideo(item) {
      if (item.videoUrl) {
        uni.navigateTo({
          url: `/pages/video/detail?id=${item.id}`
        })
      } else {
        uni.showToast({
          title: '视频链接无效',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.health-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  box-sizing: border-box;
  width: 100%;

  .video-list {
    width: 100%;
    max-width: 1200rpx;
    margin: 0 auto;

    .video-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      width: 100%;

      .video-detail {
        position: relative;
        width: 100%;
        padding-top: 56.25%; // 16:9 宽高比
        background: #000;

        video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .video-info {
        padding: 20rpx;
        width: 100%;
        box-sizing: border-box;

        .video-title {
          font-size: clamp(28rpx, 4vw, 32rpx);
          font-weight: bold;
          color: #333;
          margin-bottom: 16rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 1.4;
        }

        .doctor-info {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 12rpx;

          .doctor-avatar {
            width: clamp(40rpx, 6vw, 48rpx);
            height: clamp(40rpx, 6vw, 48rpx);
            border-radius: 50%;
          }

          .doctor-name {
            font-size: clamp(24rpx, 3.5vw, 28rpx);
            color: #333;
          }

          .doctor-title {
            font-size: clamp(22rpx, 3vw, 24rpx);
            color: #666;
          }
        }
      }
    }
  }

  .loading-state {
    text-align: center;
    padding: 30rpx;
    color: #999;
    font-size: clamp(24rpx, 3vw, 26rpx);
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 30rpx;

    image {
      width: clamp(160rpx, 25vw, 200rpx);
      height: clamp(160rpx, 25vw, 200rpx);
      margin-bottom: 20rpx;
    }

    text {
      color: #999;
      font-size: clamp(24rpx, 3.5vw, 28rpx);
    }
  }
}
</style>